<template>
  <div class="weather">
    <div class="weather-time">
        <div class="time-logo">
            <img src="../assets/images/u69.svg" />
        </div>
        <div class="time-info">
            <div class="time-info-time">{{clock}}</div>
            <div class="time-info-date">{{today}}</div>
        </div>
    </div>
    <div class="weather-info">
        <div class="weather-logo">
            <i :class="iconDay"></i>
        </div>
        <div class="temp-info">
            <div class="temp-info-degree">{{ temp }}</div>
            <div class="temp-info-desc">{{textDay}}</div>
        </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import "qweather-icons/font/qweather-icons.css"

  export default {
    name: 'weatherInfo',
    data() {
        return {
            today : '',
            clock : '',
        }
    },
    computed :{
        ...mapGetters('weather',['temp','textDay','iconDay'])
    },
    mounted(){
        //位置坐标
        let payload={location: '103.503143,31.128029'}
        this.loadWeather(payload);
    },
    created() {
        this.updateTime();
        //时钟更新
        setInterval(() => {
            this.updateTime();
        } , 1000);
    },
    methods: {
        //时钟更新
        updateTime(){
            var date = new Date();
            this.today = date.getFullYear() + "/" + (date.getMonth()+1).toString().padStart(2,'0') + "/" + (date.getDate()).toString().padStart(2,'0') ;
            var hours =( date.getHours()).toString().padStart(2,'0');
            var minutes = (date.getMinutes()).toString().padStart(2,'0');
            var seconds = (date.getSeconds()).toString().padStart(2,'0');
            this.clock = hours + ":" + minutes + ":" + seconds;
        },
        ...mapActions('weather',['loadWeather']),

        //获取天气信息
        // loadWeather(){
            
        //     this.$store.dispatch('weather/loadWeatherAction',payload);
        // }
    }
  };
</script>
  
<style  lang="less">
 .weather {
    display: flex;  
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
    margin-left: 20px;  
    .weather-time {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(255, 255, 255, 1);
        .time-logo>img{
            width: 36px;
            height: 36px;
        }
        .time-info {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            padding-left: 10px;
            .time-info-time {
                font-size: 24px;
            }
            .time-info-date {
                color: rgba(255, 255, 255, 0.75);
            }
        }
        
    }
    .weather-info {
        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(255, 255, 255, 1);
        display: flex;
        align-items: center;
        .weather-logo>i {
            font-size: 40px;
        }
        .temp-info {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding-left: 10px;
            align-items: center;
            .temp-info-degree {
                font-size: 24px !important;
            }
            .temp-info-desc {
                color: rgba(255, 255, 255, 0.75);
            }
        }
    }
 }
</style>